<template>
	<view class="page_box">
		<!-- <view class="head_box">
			<!-- tab
			<view class="order-nav u-flex">
				<view class="nav-item u-flex-col u-flex-1 u-col-center" v-for="nav in orderState" :key="nav.id"
					@tap="onNav(nav.type)">
					<view class="item-title">{{ nav.title }}</view>
					<text class="nav-line" :class="{ 'line-active': orderType === nav.type }"></text>
				</view>
			</view>
		</view> -->

		<view class="content_box">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<!-- 订单列表 -->
				<view class="order-list" v-for="(order, orderIndex) in orderList" :key="order.id"
					@tap.stop="jump('/pages/order/detailtwo', { id: order.id })">
					<view class="order-head u-flex u-row-between">
						<text class="no">订单编号：{{ order.order_sn }}</text>
						<text class="state">{{ order.status_name }}</text>
					</view>
					<view class="goods-order" >
						<view class="order-content">
							<view class="goods-card">
								<image class="imgs" :src="order.image"></image>
								<view class="goods-card-box">
									<view class="title">{{order.cat_code}}</view>
									<view class="icon">
										<view class="icon_list colorone">{{order.breed_name}}</view>
										<view class="icon_list colortwo">{{order.age}}天</view>
										<view class="icon_list2 colorthr"><image :src="order.gender=='公'?`${$IMG_URLT}category_03.png`:`${$IMG_URLT}category_04.png`"></image></view>
									</view>
									<!-- <view class="text">{{item.introduce}}</view> -->
									<!-- <view class="text">{{perGoodsList.name}}</view>
									<view class="u-flex u-row-between">
										<view class="icon">{{perGoodsList.breed}}</view>
										<view class="iconlist">{{perGoodsList.breed}}</view>
									</view> -->
									<text class="order-num">
									  {{ order.total_amount || 0 }}
									</text>
								</view>
							</view>
							<!-- <shopro-mini-card :title="order.cat.name" :image="order.cat.image">
								<template #describe>
									<view class="order-sku u-ellipsis-1">
										<text class="order-num">数量:{{ goods.goods_num || 0 }};</text>
										{{ goods.goods_sku_text ? goods.goods_sku_text : '' }}
									</view>
								</template>
								<template #cardBottom>
									<view class="order-price-box u-flex ">
										<text class="order-price font-OPPOSANS">{{ order.cat.price || 0 }}</text>
										<!-- <button class="u-reset-button status-btn"
											v-if="goods.status_name">{{ goods.status_name }}</button> 
									</view>
								</template>
							</shopro-mini-card> -->
						</view>
					</view>
					<view class="order-bottom">
						<!-- <view class="all-msg u-flex font-OPPOSANS">
							优惠：
							<text class="all-unit">￥</text>
							{{ order.discount_fee }} ，运费：
							<text class="all-unit">￥</text>
							{{ order.dispatch_amount }} ，{{ order.status <= 0 ? '需付款' : '实付款' }}：
							<view class="all-money font-OPPOSANS">{{ order.total_fee }}</view>
						</view> -->

						<!-- 按钮 -->
						<view class="btn-box u-flex" >
							<!-- v-if="order.status==0" -->
							<!-- <block v-for="orderBtn in order.btns" :key="orderBtn"> -->
								<!-- <button v-if="orderBtn === 'cancel'" @tap.stop="onCancel(order.id, orderIndex)"
									class="u-reset-button obtn1">取消订单</button> -->
								<button @tap.stop="onPay(order.order_sn)"
									class="u-reset-button obtn2">去签约</button>
								<!-- <button v-if="orderBtn === 'groupon'"
									@tap.stop="jump('/pages/activity/groupon/detail', { id: order.ext_arr.groupon_id })"
									class="u-reset-button obtn2">
									拼团详情
								</button>
								<button v-if="orderBtn === 'delete'" @tap.stop="onDelete(order.id, orderIndex)"
									class="u-reset-button obtn3">删除</button>
								<button v-if="orderBtn === 'express'" @tap.stop="onExpress(order.id, orderIndex)"
									class="u-reset-button obtn1">查看物流</button> -->
							<!-- </block> -->
						</view>
					</view>
				</view>

				<!-- 空白页 -->
				<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_groupon.png'"
					tipText="暂无商品，还有更多好货等着你噢~"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-show="orderList.length" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isEmpty: false,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				orderType: 'all',
				orderList: [],
			};
		},
		onShow() {
			if (this.$Route.query.type) {
				this.orderType = this.$Route.query.type;
			}
			this.orderList = [];
			this.currentPage = 1;
			this.lastPage = 1;
			this.getOrderList();
		},
		methods: {
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			// 订单列表
			getOrderList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('order.cats_orderindex', {
					type: 'all',
					page: that.currentPage
				}, '加载中...').then(res => {
					if (res.code === 1) {
						that.orderList = [...that.orderList, ...res.data.data];
						that.isEmpty = !that.orderList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},

			// 加载更多
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getOrderList();
				}
			},

			// 立即购买
			onPay(id) {
				this.$Router.replace({
				  path:`/pages/order/signedone?order_sn=${id}`,
				});
				// uni.navigateTo({
				// 	url: `/pages/order/payment/method?orderId=${id}&orderType=goods`
				// });
			},
		}
	};
</script>

<style lang="scss">
	.order-nav {
		background: #fff;
		height: 80rpx;

		.nav-item {
			flex: 1;

			.item-title {
				font-size: 30rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 76rpx;
			}

			.nav-line {
				width: 100rpx;
				height: 4rpx;
				background: #fff;
			}

			.line-active {
				background: rgba(230, 184, 115, 1);
			}
		}
	}

	.order-list {
		background: #fff;
		margin: 20rpx auto;
		width: 702rpx;
		.order-bottom {
			padding-bottom: 20rpx;

			.btn-box {
				justify-content: flex-end;
			}

			.all-msg {
				font-size: 24rpx;
				color: #999;
				justify-content: flex-end;
				margin-bottom: 10rpx;
				padding: 0 30rpx;

				.all-unit {
					font-size: 20rpx;
				}

				.all-money {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;

					&::before {
						content: '￥';
						font-size: 20rpx;
					}
				}
			}

			.obtn1 {
				width: 160rpx;
				line-height: 60rpx;
				background: rgba(238, 238, 238, 1);
				border-radius: 30rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
				padding: 0;
			}

			.obtn2 {
				width: 146rpx;
				height:64rpx;
				line-height: 64rpx;
				background: #FBB03B;
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: #111111;
				padding: 0;
			}

			.obtn3 {
				background: #ffeeee;
				color: #e50808;
				width: 160rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				padding: 0;
			}
		}

		.order-head {
			padding: 0 25rpx;
			height: 77rpx;
			border-bottom: 1rpx solid #dfdfdf;

			.no {
				font-size: 26rpx;
				color: #111111;
			}

			.state {
				font-size: 26rpx;
				color: #FBB03B;
			}
		}

		.goods-order {
			border-bottom: 1px solid rgba(223, 223, 223, 0.5);
			
			margin-bottom: 20rpx;

			.order-content {
				padding-bottom: 20rpx;
				.goods-card {
				  box-sizing: border-box;
					padding:32rpx 32rpx;
					display: flex;
					align-items: center;
					.imgs{
						width: 180rpx;
						height: 180rpx;
						border-radius: 15rpx;
						display: block;
					}
					.goods-card-box{
						width: 458rpx;
						height: 180rpx;
						margin-left:16rpx;
						display: flex;
						flex-direction: column;
						.title{
							font-size: 28rpx;
							font-family: SourceHanSansCN-Medium, SourceHanSansCN;
							font-weight: 500;
							color: #111111;
						}
						.icon{
							margin-top:16rpx;
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							.icon_list{
								height: 42rpx;
								line-height: 42rpx;
								padding:0 12rpx;
								font-size: 22rpx;
								font-family: SourceHanSansCN-Regular, SourceHanSansCN;
								font-weight: 400;
								margin-right:10rpx;
							}
							.icon_list2{
								height: 42rpx;
								line-height: 42rpx;
								padding:0 8rpx;
								display: flex;
								align-items: center;
								image{
									width: 30rpx;
									height: 30rpx;
								}
							}
							.colorone{
								color: #F69B0E;
								background: rgba(251,176,59,0.12);
							}
							.colortwo{
								color: #E60000;
								background: rgba(230,0,0,0.09);
							}
							.colorthr{
								color: #F69B0E;
								background: rgba(83,0,230,0.09);
							}
							
						}
						.order-num{
							align-items: flex-end;
							font-size: 28rpx;
							font-family: SourceHanSansCN-Regular, SourceHanSansCN;
							font-weight: 400;
							color: #111111;
							margin-top:auto;
							::before{
								content: "¥";
								font-size: 28rpx;
							}
						}
					}
				}
				.icon{
					margin-top:16rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.icon_list{
						padding:10rpx 12rpx;
						font-size: 22rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						margin-right:10rpx;
					}
					.icon_list2{
						padding:6rpx 8rpx;
						display: flex;
						align-items: center;
						image{
							width: 30rpx;
							height: 30rpx;
						}
					}
					.colorone{
						color: #F69B0E;
						background: rgba(251,176,59,0.12);
					}
					.colortwo{
						color: #E60000;
						background: rgba(230,0,0,0.09);
					}
					.colorthr{
						color: #F69B0E;
						background: rgba(83,0,230,0.09);
					}
					
				}
				.order-sku {
					font-size: 24rpx;

					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					width: 450rpx;
					margin-bottom: 20rpx;

					.order-num {
						margin-right: 10rpx;
					}
				}

				.order-price-box {
					.status-btn {
						height: 32rpx;
						border: 1rpx solid rgba(207, 169, 114, 1);
						border-radius: 15rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(168, 112, 13, 1);
						padding: 0 10rpx;
						margin-left: 20rpx;
						background: rgba(233, 183, 102, 0.16);
					}

					.order-price {
						font-size: 36rpx;
						font-weight: 600;
						color: #111111;
						&:before{
							content: '￥';
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}
</style>
